<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
        const TodoList = {
        data() {
          return {
            userInput: "",
            todos: [
              {
                id: 1,
                title: "Do the dishes",
              },
              {
                id: 2,
                title: "Take out the trash",
              },
              {
                id: 3,
                title: "Mow the lawn",
              },
            ],
          };
        },

        template:`
        <h3>TodoList</h3>
        <hr>

        <form @submit.prevent="addTodo">
            <input type="text" v-model="userInput">
            <button>Action</button>
        </form>
        <hr>

        <ul>
            <todo-item 
                v-for="(item,index) of todos"
                :todo="item"
                @remove="removeTodo(index)"
            ></todo-item>
        </ul>
        `,

        methods:{
            addTodo(){
                console.log("addTodo",this.userInput);

                this.todos.push({
                    date:Date.now(),
                    title:this.userInput
                }),
                this.userInput = ""

                console.log(this.todos);
            },
            removeTodo(index){
                this.todos.splice(index,1)
            }
        }
      }

      const app = Vue.createApp(TodoList)

      app.component(
          "todo-item",
          {
              template:`
              <li>
                {{todo.title}}
                <button @click="onBtnClick">狗带</button>
            </li>
              `,
              methods:{
                onBtnClick(){
                    this.$emit('remove')
                }
              },
              props:['todo'],
              emits:['remove']
          }
      )
      
      app.mount("#app");
    </script>
  </body>
</html>
